<form autocomplete="off" class="layui-form layui-box modal-form-box" action="/admin/adminbanner/editpost" data-auto="true" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="col-xs-5">
            <input type="text" name="name" value='{$vo.name|default=""}' required="required" title="请输入名称" placeholder="请输入2位及以上字符用户名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片连接</label>
        <div class="col-xs-5">
            <input type="text" autofocus name="imgHref" value='{$vo.imgHref|default=""}' title="请输入图片连接" placeholder="请输入图片连接" class="layui-input">
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-2 control-label layui-form-label label-required">状态</label>
        <div class="col-xs-8">
            <div class="mt-radio-inline padding-bottom-0">
                <label class="">
                    <input data-auto-none="" type="radio" <?php if($vo['status'] ==1){?>checked <?php }?>  name="status" value="1">正常
                </label>
                <label class="">
                    <input data-auto-none="" type="radio" <?php if($vo['status'] ==2){?>checked <?php }?>  name="status" value="2">禁用
                </label>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">广告位置</label>
        <div class="col-xs-5">
            <select name='pid' class='layui-select full-width' lay-ignore>
                {foreach  $vo.list as $menu}
                {eq name='menu.id' value='$vo.pid|default=0'}
                <option selected value='{$menu.id}'>{$menu.name|raw}</option>
                {else}
                <option value='{$menu.id}'>{$menu.name|raw}</option>
                {/eq}
                {/foreach}
            </select>
            <p class="help-block color-desc"><b>必填</b>，请选择上级菜单或顶级菜单（目前最多支持三级菜单）</p>
        </div>
    </div>

    <div class="layui-form" wid100>
        <div class="layui-form-item">
            <label class="layui-form-label">广告开始时间</label>
            <div class="col-xs-5">
                <input type="text" class="layui-input test-laydate-item" value="<?php echo date('Y-m-d',$vo['starttime'])?>" name="starttime" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">广告结束时间</label>
            <div class="col-xs-5">
                <input type="text" class="layui-input test-laydate-item" value="<?php echo date('Y-m-d',$vo['endtime'])?>" name="endtime" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-2 control-label layui-form-label ">广告图片</label>
        <div  style="min-height:1px;">
            <div class="container col-xs-5">
                <div class="row">
                    <div class="layui-upload-list col-xs-5">
                        <div style=" min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                            <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                                <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                                    <div id="clipArea" style="margin:10px;height: 520px;"></div>
                                    <div class="col-xs-5" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                        <input id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;" value="保存封面">
                                    </div>
                                </div>
                            </div>

                                <input  id="view"  style="width:750px;height:200px; background-image: url({$vo.purl})" title="请上传 750*200 的封面图片" >
                            <div style="height:10px;"></div>
                            <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
                                点击上传封面图
                                <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="pictureid" id="img" value="{$vo.pictureid}">
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="col-xs-5">
            <input value='{$vo.sort|default=""}' title="请输入排序" name="sort" placeholder="请输入排序" class="layui-input">
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'>{/if}
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
    <script>
        window.laydate.render({range: true, elem: '#create_at'});
        window.form.render();
        //同时绑定多个
        lay('.test-laydate-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });
        //图片裁剪上传
        var clipArea = new bjj.PhotoClip("#clipArea", {
            size: [750, 200],// 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [750, 200], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
            file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
            view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
            ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
            loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                $('.cover-wrap').fadeIn();
                console.log("照片读取中");
            },
            loadComplete: function() {
                // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                console.log("照片读取完成");
            },
            //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
            clipFinish: function(dataURL) {
                // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
                $('.cover-wrap').fadeOut();
                $('#view').css('background-size','100% 100%');
                //图片上传 base64
                $.ajax({
                    url: '/admin/adminoss/index',
                    type: 'POST',
                    data: dataURL,                    // 上传formdata封装的数据
                    dataType: 'JSON',
                    processData: false, //告诉jquery不要发送数据
                    contentType: false, //不要射中content-type
                    success:function (data) {           //成功回调
                        if(data.id !=''){
                            $('#img').val(data.id);
                            layer.msg('上传成功');
                        }else{
                            layer.msg('上传失败，请联系管理员');
                        }
                    }
                });
            }
        });
    </script>
</form>
